import {Button, List} from "antd-mobile";
import React, {useEffect, useState} from "react";
import {useLocation, useNavigate} from "react-router-dom";
import {airConditionInfo, batteryInfo, DashboardData, repairInfo} from "../../../Datasource";

const FaultInfo = () => {
    const location = useLocation()
    const navigate = useNavigate()
    const [item, setItem] = useState<any>({
        name: undefined
    });

    const temp = location.pathname.split('/')
    const typeId = Number(temp[temp.length - 2])
    const deviceId = Number(temp[temp.length - 1])

    useEffect(() => {
        if (location) {
            repairInfo.map(e => {
                if (typeId === 1) {
                    airConditionInfo.map(a => {
                        if (a.id === deviceId) {
                            const faultItem = {
                                ...e,
                                device: a
                            }
                            setItem(faultItem)
                        }
                    })
                } else if (typeId === 0) {
                    batteryInfo.map(a => {
                        if (a.id === deviceId) {
                            const faultItem = {
                                ...e,
                                device: a
                            }
                            setItem(faultItem)
                        }
                    })
                }
            })
        }
    }, [])


    if (item.device) {
        return <div>
            <List mode='card'>
                <List.Item children={'设备名称'} extra={item.device.name}/>
                <List.Item children={'机房名称'} extra={item.device.machineRoom}/>
                <List.Item children={'设备类型'} extra={item.type ? '空调' : '蓄电池'}/>
                <List.Item children={'基本问题描述'} extra={item.describe}/>
                <List.Item children={'报修人姓名'} extra={item.maintenancePerson}/>
                <List.Item children={'联系方式'} extra={item.contact}/>
            </List>
            <div style={{margin: '0 12px'}}>
                <Button block type='submit' color='primary' size='large' onClick={() => {
                    navigate(`/fault/edit/${typeId}/${deviceId}`)
                }}>
                    修改
                </Button>
            </div>
        </div>
    } else {
        return null
    }
}

export default FaultInfo
